Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT] 마감기한 공통컴포넌트 - 지연 상태일때의 스타일 추가 #60

Merged
merged 1 commit into from
Jul 8, 2024

Conversation

Kjiw0n
Copy link
Contributor

@Kjiw0n Kjiw0n commented Jul 8, 2024

작업 내용 🧑‍💻

  • 마감기한 공통 컴포넌트에서, 지연 상태일때의 스타일이 추가되어서 props에 isDelayed를 이용해 구현하였습니다!

알게된 점 🚀

기록하며 개발하기!

  • isDelayed일때는(: 지연상태) hover / pressed / clicked가 발생하면 안된다. 이 경우를 하나하나 상태 엮어서 스타일링 해야하나 했는데, pointer-events: none; 라는 것을 이용하면 다음 이벤트들이 막아진다는 것을 알았다!

리뷰 요구사항 💬

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

  • size가 small일때만 사용되는 스타일링이지만, size 역시 props로 넘겨받기에 따로 제한을 걸어두지는 않았습니다! 제한을 거는 것이 좋을 지 코멘트 부탁드려요!

관련 이슈

close #59

스크린샷 (선택)

2024-07-08.23.36.56.mov

Copy link
Member

@jeeminyi jeeminyi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

size를 prop으로 받아오고, small일때만 적용되는 스타일이라는 말씀이시죵? 저는 따로 제한 안걸어두 될 것 같은데 다른 분들 의견도 궁금합니다!
pointer-events: none....,, 저도 진즉 알았으면 편했을텐데,, 덕분에 배워갑니다 ㅎㅎ!!

Copy link
Member

@wrryu09 wrryu09 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오오 처음 봤는데 정말 유용한 속성이네요!!

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

이런 속성들이 있다고 하네요,, 덕분에 더 편하게 작업할 수 있을 것 같아요!

background: ${theme.palette.Orange.Orange1};
border-color: ${theme.palette.Orange.Orange5};

pointer-events: none;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우와 이런 속성이 있었군요!!! 너무 좋네요 저도 써먹어보겠습니다ㅎ.ㅎ

@Kjiw0n Kjiw0n merged commit f724338 into develop Jul 8, 2024
2 checks passed
@Kjiw0n Kjiw0n deleted the feat/#59-deadline-add branch July 8, 2024 15:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[FEAT] 마감기한 공통 컴포넌트 - 지연상태 스타일 추가
3 participants